//用户给我什么组件，我用什么组件， 更通用
import Vue from 'vue';

// 给 Notice添加一个创建组件实例的方法，可以动态编译自身模板并挂载

function create(Component, props) {
//Component 要创建组件的名称
//props 组件的属性

  //创建一个Vue实例，一个独立全新
  const instance = new Vue({
    render(h){// h简称: createElement，渲染函数
      //渲染函数： 用于渲染指定模板为虚拟dom
      //<ball-anim :el="el"></ball-anim>
      return h(Component, {props})
    }
  }).$mount(); 
  //执行挂载，若不知道选择器，则模板将被渲染为文档之外的元素

  //不可以$mount('body'),$mount最终执行的方式是： outerHtml
  //最终会覆盖那个标签，当然不能 替换 body

  //必须使用原生的dom api把他插入文档中

  // $mount挂载完成以后，返回的instance 还是是vue实例，不是dom
  // vue实例是内容的管理对象，是个容器，包含虚拟dom 与 真正的 dom
  // $el 即暴露出的真正的dom，指的是渲染的Notice.vue中真实的dom
  document.body.appendChild(instance.$el)

  //也可以在html里新增个div，挂载到这个div上

  //获取Notice实例
  // $children指的是当前Vue实例中包含的所有组件实例 的数组
  const comp = instance.$children[0];

    //移除的方法
  comp.remove = () => {
    //vue实例的销毁方法
    console.log('instance',instance);
    
    instance.$destroy(); //销毁实例，释放内存
  }
  console.log('comp',comp.remove);
  
 
  return comp;
}


export default create;